﻿<common:LayoutAwarePage x:Class="Hue_Demo_WinStore.MainPage"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        xmlns:common="using:Hue_Demo_WinStore.Common"
                        xmlns:convert="using:Hue_Demo_WinStore.Converters"
                        xmlns:ignore="http://www.ignore.com"
                        mc:Ignorable="d ignore"
                        d:DesignHeight="768"
                        d:DesignWidth="1366">

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Skins/MainSkin.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <convert:BooleanToVisibilityConverter x:Key="BoolToVis" />
            <convert:ReverseBooleanToVisibilityConverter x:Key="RevBoolToVis" />
			<convert:ColorToOpacity x:Key="ColorToOpacity" />
            <convert:HueLightToColor x:Key="HueToColor" />
        	
        </ResourceDictionary>

    </Page.Resources>
    <Page.BottomAppBar>
        <AppBar>
            <Button Style="{StaticResource PlayAppBarButtonStyle}"
                    Click="PlayEncounters"/>
            
        </AppBar>
    </Page.BottomAppBar>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>


        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button x:Name="backButton"
                    Click="GoBack"
                    IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                    Style="{StaticResource BackButtonStyle}" Visibility="Collapsed" />
            
            <TextBlock x:Name="pageTitle"
                       Grid.Column="1"
                       Text="hue 4 you"
                       Style="{StaticResource PageHeaderTextStyle}" Margin="64,0,30,40" />
        </Grid>
        <ProgressBar VerticalAlignment="Bottom" 
                     IsIndeterminate="{Binding IsWorking}"
					 Visibility="{Binding IsWorking, Converter={StaticResource BoolToVis}}" />
        <Grid Grid.Row="1" Margin="48,12,36,48">
        	<Grid.RowDefinitions>
        		<RowDefinition Height="Auto"/>
        		<RowDefinition/>
        	</Grid.RowDefinitions>
        	<Grid.ColumnDefinitions>
        		<ColumnDefinition Width="33*"/>
        		<ColumnDefinition Width="33*"/>
        		<ColumnDefinition Width="33*"/>
        	</Grid.ColumnDefinitions>
        	<Grid x:Name="Light1Control" Grid.Row="1" Margin="12,0">
        		<Grid.RowDefinitions>
        			<RowDefinition Height="40*"/>
        			<RowDefinition Height="234*"/>
        		</Grid.RowDefinitions>
        		<Grid.ColumnDefinitions>
        			<ColumnDefinition Width="25*"/>
        			<ColumnDefinition Width="25*"/>
        			<ColumnDefinition Width="25*"/>
					<ColumnDefinition Width="25*"/>
        		</Grid.ColumnDefinitions>
        		<Viewbox Margin="0,57,0,61" Grid.Row="1" Grid.ColumnSpan="4">
        			<Canvas Width="45" Height="75" HorizontalAlignment="Center" VerticalAlignment="Center">
        				<Path Data="F1M21.456,0C21.286,0 21.195,0.005 21.195,0.005 21.195,0.005 21.104,0 20.934,0 18.51,0 0,0.759 0,23.882 0,34.046 12.402,52.581 12.402,57.544L30.071,57.544C30.071,52.581 42.389,34.046 42.389,23.882 42.389,0.757 23.878,0 21.456,0z M26.208,52.557L24.259,52.557 24.259,39.686 18.296,39.686 18.296,52.557 16.257,52.557C15.41,50.309 14.09,47.541 12.322,43.885 9.225,37.485 4.987,28.724 4.987,23.882 4.987,16.001 7.414,10.489 12.2,7.5 16.109,5.058 20.453,4.988 20.934,4.988L20.99,4.988 21.16,4.994 21.366,4.988 21.456,4.988C21.937,4.988 26.281,5.058 30.19,7.5 34.977,10.489 37.403,16.001 37.403,23.882 37.403,28.73 33.19,37.495 30.113,43.898 28.36,47.546 27.05,50.314 26.208,52.557z" 
							Fill="{Binding HueLight1, Converter={StaticResource HueToColor}}"
        					Height="57.544" 
        					Canvas.Left="1.118" 
        					Width="42.39" 
        					Stroke="#FF131212" 
        					UseLayoutRounding="False" 
        					StrokeThickness="0" 
        					Canvas.Top="1.332" Opacity="0.705" />
        				<Path Data="F1M0,4.652L17.671,4.652 17.671,0 0,0z" 
        					Height="4.651" Canvas.Left="13.316" Canvas.Top="61.4" Width="17.671" Stroke="#FF131212" 
							UseLayoutRounding="False" StrokeThickness="0" Opacity="0.705" 
							Fill="{Binding HueLight1, Converter={StaticResource HueToColor}}"/>
        				<Path Data="F1M0,4.652L8.787,4.652 8.787,0 0,0z"
        					Height="4.651" Canvas.Left="17.778" Canvas.Top="68.534" Width="8.787" 
							Stroke="#FF131212" UseLayoutRounding="False" StrokeThickness="0" Opacity="0.705" 
							Fill="{Binding HueLight1, Converter={StaticResource HueToColor}}"/>
        			</Canvas>
        		</Viewbox>
        		<Slider Value="{Binding HueLight1.Red, Mode=TwoWay}"
        			Orientation="Vertical" Maximum="255" 
        			LargeChange="25" Grid.Row="1" Margin="12" 
        			HorizontalAlignment="Center" 
					ValueChanged="OnValueChanged" 
					PointerExited="OnPointerExited1" />
<!--  PointerExited="OnPointerReleased" PointerCanceled="OnPointerReleased"/> -->
        		<Slider Value="{Binding HueLight1.Green, Mode=TwoWay}" 
        			Orientation="Vertical" Maximum="255" 
        			LargeChange="25" Grid.Row="1" Margin="12" 
        			Grid.Column="1" HorizontalAlignment="Center" PointerExited="OnPointerExited1" 
					ValueChanged="OnValueChanged" />
        		<Slider Value="{Binding HueLight1.Blue, Mode=TwoWay}" 
        			Orientation="Vertical" Maximum="255" 
        			LargeChange="25" Grid.Row="1" Margin="12" 
        			Grid.Column="2" HorizontalAlignment="Center" 
					PointerExited="OnPointerExited1" 
					ValueChanged="OnValueChanged" />
        		<Slider Value="{Binding HueLight1.Brightness, Mode=TwoWay}"
        			Orientation="Vertical" Maximum="255" 
        			LargeChange="25" Grid.Row="1" Margin="12" 
        			Grid.Column="3" HorizontalAlignment="Center" 
                    PointerExited="OnPointerExited1"
                    ValueChanged="OnValueChanged"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6" Background="White"/>
        		<Border x:Name="red_hue_1" BorderBrush="Black" 
        			Opacity="{Binding HueLight1.Red, Converter={StaticResource ColorToOpacity}}"
        			BorderThickness="0" Margin="6" Background="#FFC30505"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6" Background="#FF780909" VerticalAlignment="Bottom">
        			<TextBlock TextWrapping="Wrap" Text="RED" FontFamily="Segoe WP Semibold" Margin="6,3,6,0" FontSize="13.333"/>
        		</Border>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6" Background="White" Grid.Column="1"/>
        		<Border x:Name="green_hue_1" BorderBrush="Black" 
        			Opacity="{Binding HueLight1.Green, Converter={StaticResource ColorToOpacity}}"
        			BorderThickness="0" Margin="6" Background="#FF189918" Grid.Column="1"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6,0,6,6" Background="#FF037613" VerticalAlignment="Bottom" Grid.Column="1">
        			<TextBlock TextWrapping="Wrap" Text="GREEN" FontFamily="Segoe WP Semibold" Margin="6,3,6,0" FontSize="13.333"/>
        		</Border>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6" Background="White" Grid.Column="2"/>
        		<Border x:Name="blue_hue_1" BorderBrush="Black" 
        			Opacity="{Binding HueLight1.Blue, Converter={StaticResource ColorToOpacity}}"
        			BorderThickness="0" Margin="6" Background="#FF123BC5" Grid.Column="2"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6,0,6,6" Background="#FF033276" VerticalAlignment="Bottom" Grid.Column="2">
        			<TextBlock TextWrapping="Wrap" Text="BLUE" FontFamily="Segoe WP Semibold" Margin="6,3,6,0" FontSize="13.333"/>
        		</Border>
        		<Border x:Name="brightness_hue_1" BorderBrush="Black" 
        			Opacity="{Binding HueLight1.Brightness, Converter={StaticResource ColorToOpacity}}"
        			BorderThickness="0" Margin="6" Background="White" Grid.Column="3"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6,0,6,6" Background="#FF838383" VerticalAlignment="Bottom" Grid.Column="3">
        			<TextBlock TextWrapping="Wrap" Text="BRIGHTNESS" FontFamily="Segoe WP Semibold" Margin="6,3,6,0" FontSize="13.333"/>
        		</Border>
        	</Grid>
            
            
        	<Grid x:Name="Light2Control" Grid.Row="1" Grid.Column="1" Margin="12,0">
        		<Grid.RowDefinitions>
        			<RowDefinition Height="40*"/>
        			<RowDefinition Height="234*"/>
        		</Grid.RowDefinitions>
        		<Grid.ColumnDefinitions>
        			<ColumnDefinition Width="25*"/>
        			<ColumnDefinition Width="25*"/>
        			<ColumnDefinition Width="25*"/>
        			<ColumnDefinition Width="25*"/>
        		</Grid.ColumnDefinitions>
        		<Viewbox Margin="0,57,1,61" Grid.Row="1" Grid.ColumnSpan="4">
        			<Canvas Width="45" Height="75" HorizontalAlignment="Center" VerticalAlignment="Center">
        				<Path Data="F1M21.456,0C21.286,0 21.195,0.005 21.195,0.005 21.195,0.005 21.104,0 20.934,0 18.51,0 0,0.759 0,23.882 0,34.046 12.402,52.581 12.402,57.544L30.071,57.544C30.071,52.581 42.389,34.046 42.389,23.882 42.389,0.757 23.878,0 21.456,0z M26.208,52.557L24.259,52.557 24.259,39.686 18.296,39.686 18.296,52.557 16.257,52.557C15.41,50.309 14.09,47.541 12.322,43.885 9.225,37.485 4.987,28.724 4.987,23.882 4.987,16.001 7.414,10.489 12.2,7.5 16.109,5.058 20.453,4.988 20.934,4.988L20.99,4.988 21.16,4.994 21.366,4.988 21.456,4.988C21.937,4.988 26.281,5.058 30.19,7.5 34.977,10.489 37.403,16.001 37.403,23.882 37.403,28.73 33.19,37.495 30.113,43.898 28.36,47.546 27.05,50.314 26.208,52.557z" 
        					Fill="{Binding HueLight2, Converter={StaticResource HueToColor}}"
        					Height="57.544" 
        					Canvas.Left="1.118" 
        					Width="42.39" 
        					Stroke="#FF131212" 
        					UseLayoutRounding="False" 
        					StrokeThickness="0" 
        					Canvas.Top="1.332" Opacity="0.705" />
        				<Path Data="F1M0,4.652L17.671,4.652 17.671,0 0,0z" 
        					Height="4.651" Canvas.Left="13.316" Canvas.Top="61.4" Width="17.671" Stroke="#FF131212" 
        					UseLayoutRounding="False" StrokeThickness="0" Opacity="0.705" 
        					Fill="{Binding HueLight2, Converter={StaticResource HueToColor}}"/>
        				<Path Data="F1M0,4.652L8.787,4.652 8.787,0 0,0z"
        					Height="4.651" Canvas.Left="17.778" Canvas.Top="68.534" Width="8.787" 
        					Stroke="#FF131212" UseLayoutRounding="False" StrokeThickness="0" Opacity="0.705" 
        					Fill="{Binding HueLight2, Converter={StaticResource HueToColor}}"/>
        			</Canvas>
        		</Viewbox>
        		<Slider Value="{Binding HueLight2.Red, Mode=TwoWay}"
        			Orientation="Vertical" Maximum="255" 
        			LargeChange="25" Grid.Row="1" Margin="12" 
        			HorizontalAlignment="Center" 
					ValueChanged="OnValueChanged" 
					PointerExited="OnPointerExited2" />
                <!--  PointerExited="OnPointerReleased" PointerCanceled="OnPointerReleased"/> -->
        		<Slider Value="{Binding HueLight2.Green, Mode=TwoWay}" 
        			Orientation="Vertical" Maximum="255" 
        			LargeChange="25" Grid.Row="1" Margin="12" 
        			Grid.Column="1" 
					ValueChanged="OnValueChanged" 
					HorizontalAlignment="Center" PointerExited="OnPointerExited2"/>
        		<Slider Value="{Binding HueLight2.Blue, Mode=TwoWay}" 
        			Orientation="Vertical" Maximum="255" 
        			LargeChange="25" Grid.Row="1" Margin="12" 
        			ValueChanged="OnValueChanged" 
					Grid.Column="2" HorizontalAlignment="Center" PointerExited="OnPointerExited2"/>
        		<Slider Value="{Binding HueLight2.Brightness, Mode=TwoWay}"
        			Orientation="Vertical" Maximum="255" 
        			LargeChange="25" Grid.Row="1" Margin="12" 
        			Grid.Column="3" HorizontalAlignment="Center" ValueChanged="OnValueChanged" PointerExited="OnPointerExited2"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6" Background="White"/>
        		<Border x:Name="red_hue_2" BorderBrush="Black"
					Opacity="{Binding HueLight2.Red, Converter={StaticResource ColorToOpacity}}"
        			BorderThickness="0" Margin="6" Background="#FFC30505" />
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6" Background="#FF780909" VerticalAlignment="Bottom">
        			<TextBlock TextWrapping="Wrap" Text="RED" FontFamily="Segoe WP Semibold" Margin="6,3,6,0" FontSize="13.333"/>
        		</Border>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6" Background="White" Grid.Column="1"/>
        		<Border x:Name="green_hue_2" BorderBrush="Black" 
        			Opacity="{Binding HueLight2.Green, Converter={StaticResource ColorToOpacity}}"
        			BorderThickness="0" Margin="6" Background="#FF189918" Grid.Column="1"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6,0,6,6" Background="#FF037613" VerticalAlignment="Bottom" Grid.Column="1">
        			<TextBlock TextWrapping="Wrap" Text="GREEN" FontFamily="Segoe WP Semibold" Margin="6,3,6,0" FontSize="13.333"/>
        		</Border>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6" Background="White" Grid.Column="2"/>
        		<Border x:Name="blue_hue_2" BorderBrush="Black" 
        			Opacity="{Binding HueLight2.Blue, Converter={StaticResource ColorToOpacity}}"
        			BorderThickness="0" Margin="6" Background="#FF123BC5" Grid.Column="2"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6,0,6,6" Background="#FF033276" VerticalAlignment="Bottom" Grid.Column="2">
        			<TextBlock TextWrapping="Wrap" Text="BLUE" FontFamily="Segoe WP Semibold" Margin="6,3,6,0" FontSize="13.333"/>
        		</Border>
        		<Border x:Name="brightness_hue_2" BorderBrush="Black" 
        			Opacity="{Binding HueLight2.Brightness, Converter={StaticResource ColorToOpacity}}"
        			BorderThickness="0" Margin="6" Background="White" Grid.Column="3"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6,0,6,6" Background="#FF838383" VerticalAlignment="Bottom" Grid.Column="3">
        			<TextBlock TextWrapping="Wrap" Text="BRIGHTNESS" FontFamily="Segoe WP Semibold" Margin="6,3,6,0" FontSize="13.333"/>
        		</Border>
        	</Grid>
        	<Grid x:Name="Light3Control" Grid.Row="1" Grid.Column="2" Margin="12,0">
        		<Grid.RowDefinitions>
        			<RowDefinition Height="40*"/>
        			<RowDefinition Height="234*"/>
        		</Grid.RowDefinitions>
        		<Grid.ColumnDefinitions>
        			<ColumnDefinition Width="25*"/>
        			<ColumnDefinition Width="25*"/>
        			<ColumnDefinition Width="25*"/>
        			<ColumnDefinition Width="25*"/>
        		</Grid.ColumnDefinitions>
        		<Viewbox Margin="0,57,0,61" Grid.Row="1" Grid.ColumnSpan="4">
        			<Canvas Width="45" Height="75" HorizontalAlignment="Center" VerticalAlignment="Center">
        				<Path Data="F1M21.456,0C21.286,0 21.195,0.005 21.195,0.005 21.195,0.005 21.104,0 20.934,0 18.51,0 0,0.759 0,23.882 0,34.046 12.402,52.581 12.402,57.544L30.071,57.544C30.071,52.581 42.389,34.046 42.389,23.882 42.389,0.757 23.878,0 21.456,0z M26.208,52.557L24.259,52.557 24.259,39.686 18.296,39.686 18.296,52.557 16.257,52.557C15.41,50.309 14.09,47.541 12.322,43.885 9.225,37.485 4.987,28.724 4.987,23.882 4.987,16.001 7.414,10.489 12.2,7.5 16.109,5.058 20.453,4.988 20.934,4.988L20.99,4.988 21.16,4.994 21.366,4.988 21.456,4.988C21.937,4.988 26.281,5.058 30.19,7.5 34.977,10.489 37.403,16.001 37.403,23.882 37.403,28.73 33.19,37.495 30.113,43.898 28.36,47.546 27.05,50.314 26.208,52.557z" 
        					Fill="{Binding HueLight3, Converter={StaticResource HueToColor}}"
        					Height="57.544" 
        					Canvas.Left="1.118" 
        					Width="42.39" 
        					Stroke="#FF131212" 
        					UseLayoutRounding="False" 
        					StrokeThickness="0" 
        					Canvas.Top="1.332" Opacity="0.705" />
        				<Path Data="F1M0,4.652L17.671,4.652 17.671,0 0,0z" 
        					Height="4.651" Canvas.Left="13.316" Canvas.Top="61.4" Width="17.671" Stroke="#FF131212" 
        					UseLayoutRounding="False" StrokeThickness="0" Opacity="0.705" 
        					Fill="{Binding HueLight3, Converter={StaticResource HueToColor}}"/>
        				<Path Data="F1M0,4.652L8.787,4.652 8.787,0 0,0z"
        					Height="4.651" Canvas.Left="17.778" Canvas.Top="68.534" Width="8.787" 
        					Stroke="#FF131212" UseLayoutRounding="False" StrokeThickness="0" Opacity="0.705" 
        					Fill="{Binding HueLight3, Converter={StaticResource HueToColor}}"/>
        			</Canvas>
        		</Viewbox>
        		<Slider Value="{Binding HueLight3.Red, Mode=TwoWay}"
        			Orientation="Vertical" Maximum="255" 
        			LargeChange="25" Grid.Row="1" Margin="12" 
        			HorizontalAlignment="Center" ValueChanged="OnValueChanged" PointerExited="OnPointerExited3" />
                <!--  PointerExited="OnPointerReleased" PointerCanceled="OnPointerReleased"/> -->
        		<Slider Value="{Binding HueLight3.Green, Mode=TwoWay}" 
        			Orientation="Vertical" Maximum="255" 
        			LargeChange="25" Grid.Row="1" Margin="12" 
        			Grid.Column="1" HorizontalAlignment="Center" ValueChanged="OnValueChanged" PointerExited="OnPointerExited3"/>
        		<Slider Value="{Binding HueLight3.Blue, Mode=TwoWay}" 
        			Orientation="Vertical" Maximum="255" 
        			LargeChange="25" Grid.Row="1" Margin="12" 
        			Grid.Column="2" HorizontalAlignment="Center" ValueChanged="OnValueChanged"  PointerExited="OnPointerExited3"/>
        		<Slider Value="{Binding HueLight3.Brightness, Mode=TwoWay}"
        			Orientation="Vertical" Maximum="255" 
        			LargeChange="25" Grid.Row="1" Margin="12" 
        			Grid.Column="3" HorizontalAlignment="Center" ValueChanged="OnValueChanged"  PointerExited="OnPointerExited3"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6" Background="White"/>
        		<Border x:Name="red_hue_3" BorderBrush="Black" 
        			Opacity="{Binding HueLight3.Red, Converter={StaticResource ColorToOpacity}}"
        			BorderThickness="0" Margin="6" Background="#FFC30505"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6" Background="#FF780909" VerticalAlignment="Bottom">
        			<TextBlock TextWrapping="Wrap" Text="RED" FontFamily="Segoe WP Semibold" Margin="6,3,6,0" FontSize="13.333"/>
        		</Border>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6" Background="White" Grid.Column="1"/>
        		<Border x:Name="green_hue_3" BorderBrush="Black" 
        			Opacity="{Binding HueLight3.Green, Converter={StaticResource ColorToOpacity}}"
        			BorderThickness="0" Margin="6" Background="#FF189918" Grid.Column="1"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6,0,6,6" Background="#FF037613" VerticalAlignment="Bottom" Grid.Column="1">
        			<TextBlock TextWrapping="Wrap" Text="GREEN" FontFamily="Segoe WP Semibold" Margin="6,3,6,0" FontSize="13.333"/>
        		</Border>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6" Background="White" Grid.Column="2"/>
        		<Border x:Name="blue_hue_3" BorderBrush="Black" 
        			Opacity="{Binding HueLight3.Blue, Converter={StaticResource ColorToOpacity}}"
        			BorderThickness="0" Margin="6" Background="#FF123BC5" Grid.Column="2"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6,0,6,6" Background="#FF033276" VerticalAlignment="Bottom" Grid.Column="2">
        			<TextBlock TextWrapping="Wrap" Text="BLUE" FontFamily="Segoe WP Semibold" Margin="6,3,6,0" FontSize="13.333"/>
        		</Border>
        		<Border x:Name="brightness_hue_3" BorderBrush="Black" 
        			Opacity="{Binding HueLight3.Brightness, Converter={StaticResource ColorToOpacity}}"
        			BorderThickness="0" Margin="6" Background="White" Grid.Column="3"/>
        		<Border BorderBrush="Black" BorderThickness="0" Margin="6,0,6,6" Background="#FF838383" VerticalAlignment="Bottom" Grid.Column="3">
        			<TextBlock TextWrapping="Wrap" Text="BRIGHTNESS" FontFamily="Segoe WP Semibold" Margin="6,3,6,0" FontSize="13.333"/>
        		</Border>
        	</Grid>
        	<TextBlock HorizontalAlignment="Left"
                       TextWrapping="Wrap" 
						Text="light 1"
						VerticalAlignment="Top" 
						Style="{StaticResource PageHeaderTextStyle}" 
						Margin="16,0,0,24" />
            <!-- 
						Foreground="{Binding HueLight1, Converter={StaticResource HueToColor}}"  -->
        	<TextBlock HorizontalAlignment="Left"
                       TextWrapping="Wrap" Text="light 2" 
                       VerticalAlignment="Top" 
                       Style="{StaticResource PageHeaderTextStyle}" 
                       Margin="16,0,0,24" 
                       Grid.Column="1" Foreground="#DEFFFFFF"/>
        	<TextBlock HorizontalAlignment="Left"
                       TextWrapping="Wrap" 
                       Text="light 3" 
                       VerticalAlignment="Top" 
                       Style="{StaticResource PageHeaderTextStyle}" 
                       Margin="16,0,0,24" Grid.Column="2" Foreground="#DEFFFFFF"/>
        </Grid>
        <Grid x:Name="hueLogin" 
				Grid.RowSpan="2" 
				Background="#99272727"
				Visibility="{Binding IsUserRegistered, Converter={StaticResource RevBoolToVis}}" d:IsHidden="True" >
        	<Grid.RowDefinitions>
        		<RowDefinition Height="60*"/>
        		<RowDefinition Height="Auto"/>
        		<RowDefinition Height="60*"/>
        	</Grid.RowDefinitions>
        	<Grid Grid.Row="1" Background="{StaticResource ListBoxItemSelectedBackgroundThemeBrush}">
        		<Grid.ColumnDefinitions>
        			<ColumnDefinition Width="300*"/>
        			<ColumnDefinition Width="170*"/>
        			<ColumnDefinition Width="300*"/>
        		</Grid.ColumnDefinitions>
        		<StackPanel Grid.Column="1">
        			<Border VerticalAlignment="Stretch" Height="6" >
        				<ProgressBar IsIndeterminate="{Binding IsWorking}"
								Visibility="{Binding IsWorking, Converter={StaticResource BoolToVis}}" 
                                VerticalAlignment="Center"/>
        			</Border>
        			<TextBlock TextWrapping="Wrap" Text="enter username" FontFamily="Global User Interface" Style="{StaticResource PageSubheaderTextStyle}" Margin="0,24"/>
        			<TextBox TextWrapping="Wrap" Width="300" HorizontalAlignment="Left"
							Text="{Binding UserName, Mode=TwoWay}"/>
        			<Button Content="connect to hue" 
							Command="{Binding RegisterUser}" 
							HorizontalAlignment="Right" 
							VerticalAlignment="Stretch" 
							Margin="0,24,0,12" />
        			<TextBlock TextWrapping="Wrap" Text="{Binding ConnectionError}" FontFamily="Global User Interface" Style="{StaticResource BodyTextStyle}" Margin="0,0,0,24"/>
        		</StackPanel>
        	</Grid>
        </Grid>

        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
